<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">

*{margin: 0;padding: 0;}
#div{
	width: 250px;
	height: 250px;
	-background: black;
	position: absolute;left: 50%;top: 0%;margin: 0 0 0 -125px;
}

    </style> 
</head>
<body>
<div id='div'></div>
<script type="text/javascript">
	
	var R = 20;
	var T = 20;
	for(var i = 0;i < R;i++){
		for(var j =0;j < T;j++){

			var oDiv = document.createElement('div');
			oDiv.style.width = div.offsetWidth/R + 'px';
			oDiv.style.height = div.offsetHeight/T + 'px';
			oDiv.style.left = 12.5* j + 'px';
			oDiv.style.top = 12.5* i + 'px';
			oDiv.style.position = 'absolute';
			oDiv.style.background = 'black';
			oDiv.style.transition = ((Math.random()*0.2)+0.3)+'s all ease';
			div.appendChild(oDiv);
		}
	}


	var Index = div.children.length - 1;
	//div.children[Index].style.background = '#ccc';
	var Timer = null;
	document.onclick = function(){

		if(Index == div.children.length - 1){
			clearInterval(Timer);
			Timer = setInterval(function(){
				if(Index == -1){
					clearInterval(Timer)
					Index = 0;
					return;
				}
				div.children[Index].style.top = div.children[Index].offsetTop + 400 + 'px';
				div.children[Index].style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')'
				Index--;
			},30)

		}else{
			clearInterval(Timer);
			Timer = setInterval(function(){
				if(Index == div.children.length){
					clearInterval(Timer)
					Index = div.children.length - 1;
					return;
				}
				div.children[Index].style.top = div.children[Index].offsetTop - 400 + 'px';
				div.children[Index].style.background ='black';
				Index++;
			},30)

		}
		
	}

</script>
</body>
</html>